Countdown

A simple countdown component

A quick and easy way to integrate a countdown on your page. You can control whether to include any of the values (e.g. days, hours, etc) or not. And you have the possibility to adjust the text in between each value.

Demo

Components

  • Countdown

    Attributes

    hide-days-at-zeroBoolean value: if set to true hides the 'days' value and 'text-days' value once the 'days' value is 0. Default: false
    hide-daysBoolean value: if set to true hides the 'days' value and 'text-days' value. Default: false
    hide-hours-at-zeroBoolean value: if set to true hides the 'hour' value and 'text-hour' value once the 'hour' value is 0. Default: false
    hide-hoursBoolean value: if set to true hides the 'hours' value and 'text-hours' value. Default: false
    hide-minutesBoolean value: if set to true hides the 'minutes' value and 'text-minutes' value. Default: false
    hide-secondsBoolean value: if set to true hides the 'seconds' value. Default: false
    start-timeThe timestamp of the moment your countdown is counting down to. This has to be a 13-digit timestamp number. Example: 1890257160000
    text-at-zeroThe string of text that you want to use once the countdown reaches 0.
    text-daysString of text that you want to use after the 'days' value. Default: ':'
    text-hoursString of text that you want to use after the 'hours' value. Default: ':'
    text-minutesString of text that you want to use after the 'minutes' value. Default: ':'
    text-pre-countdownString of text that you want to use prior to the countdown values.
    text-secondsString of text that you want to use after the 'seconds' value.
    instance-idYou can give your countdown component an id. Useful if you have more than one on a page.

    Events

    isCompleteIs called when countdown has ended.

Style variables

The countdown has no styling of its own and has everything set to “inherit”, so you can style it through its container element.